<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/walden.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <title>有课无课占比</title>
</head>
<style type="text/css">
    .leftChart{
        height: 400px;
        flex: 1
    }
    .rightChart{
        height: 400px;
        flex: 1.5
    }
</style>
<body>

<div class="search-container" >
    <div class="select-container" >
        <select  class="mySelect" id="option" >
            <!--<option value=''>全校</option>-->
            <!--<option value='college'>学院</option>-->
            <!--<option value='class'>班级</option>-->
        </select>
    </div>

    <div class="form-group" style="display: none" id="CollegeSelect">
        <select  class="form-control" id="College"  >
        </select>
    </div>
    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="startDate" name="startDate" placeholder="开始时间"/>
    </div>

    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate"  placeholder="结束时间"/>
    </div>

    <div class="btn-container">
        <a class="btn-thin" onclick="query()">查询</a>
    </div>

    <div class="btn-container">
        <span  class="normal-btn normal-color" onclick="setDate('1')">今日</span>
        <span  class="normal-btn normal-color" onclick="setDate('2')">本周</span>
        <span  class="normal-btn normal-color" onclick="setDate('3')">本月</span>
    </div>
    <div style="flex: 3;">

    </div>

</div>

<div id="chartsContainer" style="   height:500px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
    <!--有课老师占比-->
    <div  id="hasCourse" class="leftChart"></div>
    <!--有课率纵向比-->
    <!-- <div class="form-group col-sm-6">
        <div id="hasCourseTime" style="width: 1200px;height:500px;float:left;"></div>
    </div> -->
    <div id="hasCourseTime" class="rightChart" ></div>
</div>

<script>
    // var chartsCont=document.getElementById("chartsContainer")
    // var leftChart=document.getElementsByClassName("leftChart")[0]
    // var rightChart=document.getElementsByClassName("rightChart")[0]
    // window.onresize = function(){
    //    var boWidth= document.body.clientWidth
    //    chartsCont.style.width=boWidth+'px'
    //    leftChart.style.width=boWidth*0.4+'px'
    //    rightChart.style.width=boWidth*0.6+'px'
    // }
    var hasCourse = echarts.init(document.getElementById('hasCourse'),'');//有课老师占比
    var hasCourseTime = echarts.init(document.getElementById('hasCourseTime'),'');//有课老师纵向比
    window.onresize = function(){
        hasCourse.resize()
        hasCourseTime.resize()
    }
    var hasCourseOption = {
        title: {
            text: '有课老师占比',
            left: 'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: ['有课', '没课'],
            width:1000
        },
        series : [
            {
                type: 'pie',
                radius : '65%',
                center: ['50%', '50%'],
                selectedMode: 'single',
                data:[
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var hasCourseTimeOption = {
        title: {
            text: '有课率纵向比'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['有课率']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
            },
        },
        series: [
            {
                name:'有课率',
                type:'line',
                smooth: true,
                data:[120, 132, 101, 134, 90, 230, 210]
            }
        ]
    };
    $(function () {
        // $.ajax({
        //     url: baseURL + "/college/getAllcollege",
        //     data: {},
        //     success: function (r) {
        //         $("#option").append("<option value=''>全校</option>");
        //         for (i = 0; i < r.list.length; i++) {
        //             var tname = r.list[i].collegeName;
        //             var tid = r.list[i].collegeName;
        //             $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
        //         }
        //     }
        // });
        // hasCourse.setOption(hasCourseOption);
        $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                $("#option").append("<option value=''>全校</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        setDate('3')
    })
    function query()
    {
        $.ajax({
            url: baseURL + "allSchoolEcharts/getTeacherCourseEcharts",
            data: {
                "collegeName":$("#option").val(),
                "startDate":$("#startDate").val(),
                "endDate":$("#endDate").val()
            },
            success: function (r) {
                hasCourseOption.series[0].data=r.hasCourse;
                hasCourse.setOption(hasCourseOption);

                hasCourseTimeOption.series[0].data=r.hasCourseTime.rate;
                hasCourseTimeOption.xAxis= {
                    type: 'category',
                    data:r.hasCourseTime.name
                };
                hasCourseTime.setOption(hasCourseTimeOption);

            }
        });

    }
</script>
</body>
</html>